<!DOCTYPE html>
<!-- saved from url=(0042)https://www.helloweba.net/demo/2018/bideo/ -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>演示：HTML5轻松实现全屏视频背景</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #container {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #background_video {
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            object-fit: cover;
            height: 100%;
            width: 100%;
        }

        #video_cover {
            position: absolute;

            width: 100%;
            height: 100%;

            /*background: url('./fullScreen_files/video_cover.jpeg') no-repeat;*/
            background-size: cover;
            background-position: center;
        }

        #video_controls {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }

        #play img {
            width: 100px;
        }

        #pause img {
            width: 90px;
        }

        #pause {
            display: none;
        }

        @media (min-width: 768px) {
            #video_controls {
                display: none;
            }
        }

        /* Demo page specific styles */

        body {
            text-align: center;
            font-family: 'Microsoft yahei', Helvetica;
        }

        #container {
            height: 100%;
        }

        #overlay {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        #main_content {
            z-index: 2;
            position: relative;
            display: inline-block;

            /* Vertical center */
            top: 50%;
            transform: translateY(-50%);
        }

        #main_content h1 {
            text-transform: uppercase;
            font-weight: 600;
            color: #fff;
            font-size: 35px;
        }

        #main_content .sub_head {
            color: rgba(255, 255, 255, 0.5);
            font-size: 18px;
        }

        #main_content .info {
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            margin-top: 10px;
        }

        #links {
            margin-top: 20px;
        }

        #links a {
            border: 2px solid rgba(255, 255, 255, 0.20);
            border-radius: 61px;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
            padding: 10px 25px;
            display: inline-block;
            margin-right: 15px;
        }


        #footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: #fff;
        }

        #footer a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            margin: 10px;
            font-size: 12px;
        }

        #footer a:first-child {
            float: left;
        }

        #footer a:last-child {
            float: right;
            text-align: right;
        }

        .ad_76090 {
            width: 760px;
            height: 90px;
            margin: 10px auto;
        }

        .hidden {
            display: none
        }

        @media screen and (min-width: 320px) and (max-width: 480px) {
            #main_content {
                top: 60%;
            }

            #main_content h1 {
                font-size: 1.2rem
            }

            html {
                -webkit-text-size-adjust: none;
            }

            .ad_76090, .ad_demo {
                width: 100%;
                height: auto;
                margin: 20px auto;
                text-align: center
            }
        }
    </style>


</head>
<body aria-hidden="false">
<div id="container">
	<!--视频资源在main.js中配置-->
    <video id="background_video" loop="" muted="">
        
      
    </video>
    <div id="video_cover" style="display: none;"></div>
    <div id="overlay"></div>

    <div id="video_controls">
      <span id="play">
        <img src="./fullScreen_files/play.png">
      </span>
        <span id="pause">
        <img src="./fullScreen_files/pause.png">
      </span>
    </div>

    <section id="main_content">
        <div id="head">
            <h1>服务器出错辣°(°ˊДˋ°) °</h1>
            <p class="sub_head">我可能正在全力修复...</p>
            <p class="info">大概吧（悲</p>
        </div>
        <div id="links">
            <a href="javascript:window.location.reload()">再试一次呢</a>
        </div>

        <br>


    </section>
</div>

<div id="footer">
    <a>Nginx_Error</a>
    <a href="https://www.zuikakuedu.top/">www.zuikakuedu.top</a>
</div>

<script src="./fullScreen_files/bideo.js"></script>
<script src="./fullScreen_files/main.js"></script>

</body>

</html>